<template>
  <!--用户相关弹框-->
  <div>
    <div v-if="!userInfo">
      <router-link to="/login">
        登录
      </router-link>
    </div>
    <div v-else>
      <el-dropdown placement="right" trigger="click" @command="handleCommand">
        <!--用户信息弹窗开关 下拉菜单-->
        <div style="display:flex;">
          <div>
            <img v-if="userInfo.avatar" style="width: 30px; height: 30px; border-radius: 50%"
                 :src="userInfo.avatar" alt="img">
            <img v-else style="width: 30px; height: 30px; border-radius: 50%"
                 src="../assets/img/avatar.png" alt="img">
          </div>
          <div
              style="color: gray; font-size:10px; margin-left:5px;">{{ userInfo.username }} [{{ userInfo.roleNames }}]
          </div>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">我的资料</el-dropdown-item>
          <el-dropdown-item command="2">修改密码</el-dropdown-item>
          <el-dropdown-item command="3" divided>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--个人信息弹窗-->
      <el-dialog :visible.sync="flagShowUserInfo" width="400px">
        <div style="text-align: center; padding-bottom: 30px">
          <div>
            <!--上传图片-->
            <el-upload
                :action="getUserAvatarUploadUrl()"
                :before-upload="beforeAvatarUpload"
                :on-success="handleAvatarSuccess"
                :on-error="handleAvatarFail">
              <img v-if="userInfo.avatar" :src="userInfo.avatar"
                   style="width: 60px; height: 60px;border-radius: 50%"
                   alt="用户头像">
              <div v-else style="border:1px solid lightgray; color: lightgray; height: 60px;">+上传头像</div>
            </el-upload>
          </div>
          <div style="text-align: left; margin: 20px;">
            <div>店铺id: {{ userInfo.shopId }}</div>
            <div>用户名: {{ userInfo.username }}</div>
            <div>手机: {{ userInfo.phone }}</div>
          </div>
        </div>
      </el-dialog>

      <!--修改密码弹窗-->
      <el-dialog :visible.sync="flagShowUpdatePassword" width="400px">
        <el-form ref="elForm" :model="updatePasswordParams" size="medium"
                 label-width="100px">
          <el-form-item label="旧密码">
            <el-input v-model="updatePasswordParams.oldPassword" type="password" placeholder="请输入旧密码"
                      :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="updatePasswordParams.newPassword" type="password" placeholder="请输入新密码"
                      :maxlength="20"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="flagShowUpdatePassword=false">取消</el-button>
        <el-button type="primary" @click="handleUpdatePassword">确定</el-button>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import * as sysUserApi from "../api/sysUserApi";
import config from "../../config";
import {mapMutations, mapState} from "vuex"

export default {
  data() {
    return {
      flagShowUserInfo: false,
      flagShowUpdatePassword: false,
      // 修改密码
      updatePasswordParams: {
        oldPassword: '',
        newPassword: '',
      }
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    // 上传用户头像的url
    getUserAvatarUploadUrl() {
      return config.baseUrl + "/me/uploadAvatar?token=" + window.localStorage.getItem('token')
    },
    /*下拉菜单处理*/
    handleCommand(command) {
      if (command === "1")
        this.flagShowUserInfo = true
      else if (command === "2")
        this.flagShowUpdatePassword = true
      else if (command === "3")
        this.logout()
    },
    // 退出登录
    logout() {
      sysUserApi.logout({})
      this.$store.commit("setUserInfo", {});
      window.localStorage.removeItem('token')
      this.$store.commit("setRouterPath", "/login")
    },
    // 修改密码
    handleUpdatePassword() {
      if (this.updatePasswordParams.oldPassword.length === 0 || this.updatePasswordParams.newPassword.length === 0) {
        this.$notify.error("请输入旧密码和新密码")
        return
      }
      sysUserApi.updatePassword({
        data: this.updatePasswordParams,
        success: () => {
          this.flagShowUpdatePassword = false
        }
      })
    },
    // 上传用户头像成功回调
    handleAvatarSuccess(result) {
      console.log(JSON.stringify(result))
      if (result.code >= 0 && result.code < 30000) {
        this.$message.success("上传成功")
        this.userInfo.avatar = result.data
        this.setUserInfo(this.userInfo)
      } else {
        this.$message.error("上传失败: " + result.msg)
      }
    },
    handleAvatarFail(err) {
      this.$message.error('上传失败: ' + JSON.stringify(err))
    },
    // 上传用户头像前的处理
    beforeAvatarUpload(file) {
      const isPicture = (file.type === 'image/jpeg');
      const isLess2MB = file.size / 1024 / 1024 < 2;
      if (!isPicture) {
        this.$message.error('请上传图片格式的文件');
      }
      if (!isLess2MB) {
        this.$message.error('头像图片大小不能超过2MB!');
      }
      return isPicture && isLess2MB;
    },
  }
};
</script>


